<script setup>
import {ref, watch} from "vue";
import router from "@/router";
import {Search, Avatar, ArrowDown} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";

const handleChangeStatus = () => {
  if (token.value) {
    localStorage.removeItem("token");
    ElMessage({
      type: "success",
      message: `退出成功`,
      duration: 1500,
      onClose: () => {
        router.push("/login");
      }
    });
  } else {
    router.push("/login");
  }
};

let token = ref("");

watch(() => router.currentRoute.value.path, (newValue, oldValue) => {
  if (!localStorage.getItem("token")) router.push("/login");
  else token.value = localStorage.getItem("token");
}, {immediate: true});

</script>

<template>
  <div>
    <div class="headerNav">
      <div class="header-logo">
        <img src="../assets/images/logo.png" alt="">
      </div>
      <div class="header-search">
      </div>
      <div class="heaer-right">
        <el-link :icon="Avatar" @click="handleChangeStatus">{{ token ? "退出" : "请登录" }}</el-link>
      </div>
    </div>
    <div>

    </div>
  </div>
</template>

<style scoped>

</style>
